<template>
  <div class="select-table">
    <h2>下拉表格 ---- 一对一</h2>
    <h3>后端返回十条数据,搜索调用后端接口</h3>
    <h4>单选：</h4>
    <selectTable></selectTable>
    <h4>多选：</h4>
    <selectTable :isMultiple="true"></selectTable>
    <h3>后端一次性返回数据</h3>
    <all-data
      :data="dataList"
      :total="total"
      @selectChange="selectChange"
      checked="00003"
    ></all-data>
    <h2>下拉表格 ---- 一对多</h2>
    <h3>后端一次性返回数据</h3>
    <!-- style="display: flex; width: 100%" -->
    <div >
      <one-to-many-table
        :data="dataList"
        :config="config"
      ></one-to-many-table>
      <one-to-many-table
        :data="portData"
        style="width: 50%"
      ></one-to-many-table>
    </div>
  </div>
</template>

<script>
import selectTable from "@/components/selectTable/index.vue";
import allData from "@/components/selectTable/all-data.vue";
import oneToManyTable from "@/components/selectTable/one-to-many-table.vue";
export default {
  components: {
    selectTable,
    allData,
    oneToManyTable,
  },
  data() {
    return {
      dataList: [], // 表格绑定的数据
      total: 0, // 表格绑定的数据的总条数
      config: {
        isMultiple: true,
      },
      portData: [],
      portDataTotal: 0,
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 获取表格数据
    getDataList() {
      axios.get("/port/list").then((res) => {
        this.dataList = res.data.rows;
        this.total = res.data.total;
      });
      // axios.get("/portData/list").then((res) => {
      axios.get("/port/list").then((res) => {
        this.portData = res.data.rows;
        this.portDataTotal = res.data.total;
      });
    },
    selectChange(arr, str) {
      console.log(arr, str, "hh");
    },
  },
};
</script>

<style lang="scss" scoped>
.select-table {
  h3 {
    margin: 15px 0 5px 0;
  }
  h4 {
    margin: 15px 0 5px 0;
  }
}
</style>